<template>
  <div class="VolunteerContainer">
    <div class="NavHeader">
      <router-link to="/home"
        ><Icon type="icon-xitongfanhui"></Icon
      ></router-link>
      <div class="link">预测志愿表</div>
      <Icon type="icon-sousuo2"></Icon>
    </div>
    <div class="head">
      <header>实例志愿表1</header>
      <p>
        <span>3/4</span><span>本科一批</span><span>吉林</span><span>理科</span
        ><span>590分</span>
      </p>
    </div>
    <div class="img">
      <img width="100%" style="border-radius:10px;" src="https://join-blogs-pic.oss-cn-beijing.aliyuncs.com/yx/202312150029049.jpg" alt="">
    </div>
    <!-- <div class="volList">
      <div class="schoolCon" v-for="(item,index) in pre.congList" :key="index">
        <div class="schoolName">
          <div class="left">
            <div class="title_sc">[{{index+1}}] {{item.collegeName}}</div>
            <div class="title_sub">
              <span>{{item.bxxz}}</span><span>{{item.ranks}}</span>
              <span v-for="ite in item.tags" :key="ite">{{ite.tagName}}</span
              >
            </div>
          </div>
          <div class="right">
            <p>20%</p>
            <p>冲</p>
          </div>
        </div>
        
        <div class="volunteerList">
          <div class="title">
            <div class="listNum">1 </div>
            <div class="uniNum">{{ item.majors[0]['info'] }}</div>
            <div class="uniName">{{ item.majors[0]['info'] }}</div>
            <div class="propbability">{{ item.majors[0].resultTag }}</div>
          </div>
          <br />
          <div class="category">{{ category }}</div>
          <div class="tags">
            <div>
              学制学费<span>4</span>
            </div>
            <div>
              23年计划<span>-</span>
            </div>
            <div>
              22年最低分<span>-</span>
            </div>
            <div>
              最低位次<span>-</span>
            </div>
          </div>
        </div>

      
      </div>
      <div class="schoolCon">
        <div class="schoolName">
          <div class="left">
            <div class="title_sc">[1020]{{ pre.congList.collegeName }}</div>
            <div class="title_sub">
              <span>公办</span><span>普通本科</span><span>985</span
              ><span>211</span><span>双一流</span>
            </div>
          </div>
          <div class="right">
            <p>20%</p>
            <p>冲</p>
          </div>
        </div>
        <volunList></volunList>
      </div>
      <div class="schoolCon">
        <div class="schoolName">
          <div class="left">
            <div class="title_sc">[1020]北京航空航天大学</div>
            <div class="title_sub">
              <span>公办</span><span>普通本科</span><span>985</span
              ><span>211</span><span>双一流</span>
            </div>
          </div>
          <div class="right">
            <p>20%</p>
            <p>冲</p>
          </div>
        </div>
        <volunList></volunList>
      </div>
    </div> -->
  </div>
</template>

<script>
import Icon from "@/components/Icon.vue";
import volunList from "@/components/volunteerList.vue";
import { Predictive } from "@/api/allApi";

export default {
  name: "volunteerComponent",
  components: {
    volunList,
    Icon,
  },
  data() {
    return {
      preData: null,
      pre: {
        cong: 8,
        wen: 5,
        bao: 3,
        congList: [
          {
            collegeName: "北京工商大学嘉华学院",
            bxxz: "民办",
            ranks: "本科批",
            type: "财经类",
            tags: [],
            majors: [
              {
                info: "金融学",
                min: 390,
                precedence: 17426,
                resultTag: "稳",
              },
              {
                info: "会计学",
                min: 367,
                precedence: 19977,
                resultTag: "稳",
              },
              {
                info: "大数据管理与应用",
                min: 337,
                precedence: 52076,
                resultTag: "稳",
              },
              {
                info: "会计学",
                min: 302,
                precedence: 58518,
                resultTag: "稳",
              },
              {
                info: "金融学",
                min: 298,
                precedence: 59143,
                resultTag: "稳",
              },
            ],
            resultTag: "冲",
            recScore: "0.34",
          },
          {
            collegeName: "北京邮电大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "理工类",
            tags: [
              {
                tagId: 3,
                tagName: "双一流",
              },
              {
                tagId: 2,
                tagName: "211",
              },
              {
                tagId: 4,
                tagName: "教育部直属",
              },
            ],
            majors: [
              {
                info: "机械工程（机器人试验班）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 617,
                precedence: 1371,
                resultTag: "冲",
              },
              {
                info: "计算机类（计算机科学与技术、网络工程、数据科学与大数据技术2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 621,
                precedence: 1210,
                resultTag: "冲",
              },
              {
                info: "数字媒体技术（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 611,
                precedence: 1655,
                resultTag: "冲",
              },
              {
                info: "理科试验班（信息科学）（数学与应用数学、信息与计算科学、应用物理学2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 611,
                precedence: 1655,
                resultTag: "冲",
              },
              {
                info: "人工智能（大类招生）（包含：信息工程、人工智能、自动化专业。2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 613,
                precedence: 1541,
                resultTag: "冲",
              },
              {
                info: "网络空间安全（大类招生）（包含：网络空间安全、信息安全专业。2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 613,
                precedence: 1541,
                resultTag: "冲",
              },
              {
                info: "通信工程（大类招生）（包含：电子信息工程、通信工程专业。2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 615,
                precedence: 1445,
                resultTag: "冲",
              },
              {
                info: "电子信息类（电子信息科学与技术、电子科学与技术、光电信息科学与工程2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 617,
                precedence: 1371,
                resultTag: "冲",
              },
              {
                info: "电子商务及法律（宏福校区）（中外合作办学）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定。本专业部分课程采用英语授课，建议非英语考生慎重报考）",
                min: 564,
                precedence: 5358,
                resultTag: "稳",
              },
              {
                info: "电信工程及管理（宏福校区）（中外合作办学）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定。本专业部分课程采用英语授课，建议非英语考生慎重报考）",
                min: 570,
                precedence: 4719,
                resultTag: "保",
              },
              {
                info: "物联网工程（宏福校区）（中外合作办学）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定。本专业部分课程采用英语授课，建议非英语考生慎重报考）",
                min: 574,
                precedence: 4299,
                resultTag: "保",
              },
            ],
            resultTag: "冲",
            recScore: "0.35",
          },
          {
            collegeName: "山东职业学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [
              {
                tagId: 6,
                tagName: "双高计划",
              },
            ],
            majors: [
              {
                info: "动车组检修技术",
                min: 301,
                precedence: 58669,
                resultTag: "稳",
              },
              {
                info: "高速铁路综合维修技术",
                min: 281,
                precedence: 61546,
                resultTag: "稳",
              },
              {
                info: "铁道机车运用与维护",
                min: 275,
                precedence: 62306,
                resultTag: "稳",
              },
            ],
            resultTag: "冲",
            recScore: "0.38",
          },
          {
            collegeName: "河北交通职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [
              {
                info: "电子信息类（电子信息工程技术、物联网应用技术、集成电路技术）",
                min: 236,
                precedence: 27859,
                resultTag: "稳",
              },
              {
                info: "计算机类（软件技术、大数据技术、信息安全技术应用、智能交通技术）",
                min: 272,
                precedence: 62643,
                resultTag: "稳",
              },
            ],
            resultTag: "冲",
            recScore: "0.48",
          },
          {
            collegeName: "重庆信息技术职业学院",
            bxxz: "民办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.49",
          },
          {
            collegeName: "武汉航海职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "综合类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.49",
          },
          {
            collegeName: "河北司法警官职业学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "政法类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.5",
          },
          {
            collegeName: "四川工业科技学院",
            bxxz: "民办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.5",
          },
        ],
        wenList: [
          {
            collegeName: "铜仁学院",
            bxxz: "公办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [],
            resultTag: "稳",
            recScore: "0.63",
          },
          {
            collegeName: "成都中医药大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "医药类",
            tags: [
              {
                tagId: 3,
                tagName: "双一流",
              },
            ],
            majors: [
              {
                info: "中医学（学制5年）（不予录取色弱、色盲考生）",
                min: 523,
                precedence: 10723,
                resultTag: "稳",
              },
              {
                info: "医学信息工程（不予录取色弱、色盲考生）",
                min: 460,
                precedence: 22834,
                resultTag: "稳",
              },
              {
                info: "护理学（不予录取色弱、色盲考生；女生身高不低于1.58米，男生身高不低于1.62米）",
                min: 456,
                precedence: 23733,
                resultTag: "稳",
              },
            ],
            resultTag: "稳",
            recScore: "0.64",
          },
          {
            collegeName: "陕西航空职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [],
            resultTag: "稳",
            recScore: "0.77",
          },
          {
            collegeName: "南阳医学高等专科学校",
            bxxz: "公办",
            ranks: "专科批",
            type: "医药类",
            tags: [],
            majors: [
              {
                info: "口腔医学",
                min: 375,
                precedence: 19097,
                resultTag: "稳",
              },
              {
                info: "中医学",
                min: 368,
                precedence: 19869,
                resultTag: "稳",
              },
              {
                info: "临床医学",
                min: 303,
                precedence: 58365,
                resultTag: "稳",
              },
              {
                info: "口腔医学",
                min: 302,
                precedence: 58518,
                resultTag: "稳",
              },
            ],
            resultTag: "稳",
            recScore: "0.78",
          },
          {
            collegeName: "四川化工职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [],
            resultTag: "稳",
            recScore: "0.79",
          },
        ],
        baoList: [
          {
            collegeName: "广西民族大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "民族类",
            tags: [],
            majors: [
              {
                info: "公共管理类（行政管理、城市管理）",
                min: 490,
                precedence: 6019,
                resultTag: "稳",
              },
              {
                info: "计算机类（计算机科学与技术、软件工程、网络工程）",
                min: 437,
                precedence: 28196,
                resultTag: "稳",
              },
              {
                info: "电子信息类（电子信息工程、通信工程、自动化）",
                min: 430,
                precedence: 29898,
                resultTag: "稳",
              },
              {
                info: "法学",
                min: 493,
                precedence: 5738,
                resultTag: "稳",
              },
              {
                info: "生物技术（要求无色盲色弱）",
                min: 422,
                precedence: 31856,
                resultTag: "稳",
              },
            ],
            resultTag: "保",
            recScore: "0.84",
          },
          {
            collegeName: "沈阳大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [
              {
                info: "工业工程（中外合作办学）（部分课程英语授课）",
                min: 382,
                precedence: 41791,
                resultTag: "稳",
              },
              {
                info: "会计学",
                min: 515,
                precedence: 3877,
                resultTag: "稳",
              },
              {
                info: "自动化（中外合作办学）（部分课程英语授课）",
                min: 391,
                precedence: 39569,
                resultTag: "稳",
              },
              {
                info: "焊接技术与工程",
                min: 444,
                precedence: 26533,
                resultTag: "稳",
              },
              {
                info: "交通运输",
                min: 446,
                precedence: 26043,
                resultTag: "稳",
              },
              {
                info: "车辆工程",
                min: 447,
                precedence: 25800,
                resultTag: "稳",
              },
            ],
            resultTag: "保",
            recScore: "0.88",
          },
          {
            collegeName: "烟台理工学院",
            bxxz: "民办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [
              {
                info: "机器人工程",
                min: 318,
                precedence: 55796,
                resultTag: "稳",
              },
              {
                info: "通信工程",
                min: 320,
                precedence: 55441,
                resultTag: "稳",
              },
              {
                info: "电子信息科学与技术",
                min: 341,
                precedence: 51210,
                resultTag: "稳",
              },
              {
                info: "汉语言文学",
                min: 371,
                precedence: 19553,
                resultTag: "稳",
              },
              {
                info: "市场营销",
                min: 409,
                precedence: 15261,
                resultTag: "稳",
              },
              {
                info: "投资学",
                min: 417,
                precedence: 14295,
                resultTag: "稳",
              },
            ],
            resultTag: "保",
            recScore: "0.9",
          },
        ],
      },
      useData: null,
    };
  },
  async mounted() {
    this.setHeight();
    // let useData = JSON.parse(localStorage.getItem("useData"));
    // this.useData = useData;
    // if (!useData) {
    //   this.$router.push({ path: "/usermsg" });
    // }
    // console.log(useData.provence);
    // let res = await Predictive({ score: useData.score });
    // console.log(res.data);
    // window.localStorage.setItem("predit", JSON.stringify(res.data));
    // this.predit = res.data;
  },
  methods: {
    setHeight() {
      let cliH = document.documentElement.clientHeight;
      let conH = document.querySelector(".VolunteerContainer");
      // console.log(conH);
      conH.style.height = cliH - 60 + "px";
      // console.log(cliH - 220 + "px");
    },
  },
};
</script>

<style lang="less" scoped>
.img{
  border-radius: 10px;
  // overflow: hidden;
}
.volunteerList {
  width: 325px;
  /* margin-left: 10px; */
  height: 120px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  border: solid 1px rgb(225, 225, 225);
  .title {
    margin-top: 10px;
    margin-left: 10px;
    font-weight: bold;
    font-size: 14px;
  }
  .listNum {
    float: left;
    color: blue;
  }
  .uniNum {
    float: left;
    margin-left: 5px;
  }
  .uniName {
    letter-spacing: 1px;
    float: left;
  }
  .propbability {
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    padding: 0 5px;
    width: 70px;
    height: 30px;
    background-color: rgb(209, 239, 252);
    float: right;
    color: rgb(0, 89, 255);
    border-radius: 5px;
  }
  .category {
    letter-spacing: 0.1px;
    margin-left: 10px;
    margin-top: 5px;
  }
  .tags {
    margin-top: 5px;
    width: 320px;
    margin-left: 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .tags div {
    margin-top: 5px;
    float: left;
    width: 160px;
    color: gray;
  }
  .tags div span {
    margin-left: 5px;
    color: black;
  }
}
#font {
  display: flex;
  flex-direction: column;
  font-size: 16px;
}
.NavHeader {
  margin: 10px;
  display: flex;
  height: 25px;
  flex-direction: row;
  justify-content: space-between;
  font-weight: 700;
  padding: 0 10px;
  .link {
    a {
      padding: 0 10px;
      font-weight: 500;
    }
  }
}
.router-link-active {
  border-bottom: 2px solid black;
}
.VolunteerContainer {
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  // align-items: center;
  padding: 5px 15px 5px 15px;
  font-family: "楷体";
  background: linear-gradient(180deg, #1983e7, rgb(27, 138, 212), #cef0fa);
  .head {
    margin-bottom: 10px;
    header {
      color: #fff;
      font: 20px;
      font-weight: 700;
      margin: 10px 0 5px 0;
    }
    p {
      color: #e2e2e2;
      font-size: 14px;
      span {
        margin-right: 5px;
      }
    }
  }
  .volList {
    // display: flex;
    // flex-direction: column;

    .schoolCon {
      display: flex;
      border-radius: 10px;
      padding: 10px;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 10px;
      background-color: #fff;
      .schoolName {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          flex: 6;
          .title_sc {
            font-size: 16px;
            font-weight: 700;
          }
          .title_sub {
            font-size: 14px;
            color: rgba(43, 43, 43, 0.534);
            span {
              margin-right: 5px;
            }
          }
        }
        .right {
          flex: 1;
          border-radius: 10px;
          font-size: 16px;
          // padding: 5px;
          color: #fff;
          text-align: center;
          background-color: rgba(255, 0, 0, 0.637);
        }
      }
    }
  }
}
</style>